<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电脑操控配置中心</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/config.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/icon/menu_title_1.jpg" type="image/x-icon"/>
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>

<div id="container">
    <div class="keyboard">
        <span class="layui-breadcrumb" lay-separator=" ">
            <div value="ESCAPE">ESC</div>
            <br/><br/>
            <!-- F1 ~ F12 -->
            <div value="F1">F1</div>
            <div value="F2">F2</div>
            <div value="F3">F3</div>
            <div value="F4">F4</div>
            <div value="F5">F5</div>
            <div value="F6">F6</div>
            <div value="F7">F7</div>
            <div value="F8">F8</div>
            <div value="F9">F9</div>
            <div value="F10">F10</div>
            <div value="F11">F11</div>
            <div value="F12">F12</div>
            <br/> <br/>
            <!-- 0 ~ 9 -->
            <div value="0">0</div>
            <div value="1">1</div>
            <div value="2">2</div>
            <div value="3">3</div>
            <div value="4">4</div>
            <div value="5">5</div>
            <div value="6">6</div>
            <div value="7">7</div>
            <div value="8">8</div>
            <div value="9">9</div>
            <div value="BACK_SPACE">Backspace</div>
            <br/> <br/>
            <!-- //A ~ Z -->
            <div value="TAB">TAB</div>
                <div value="Q">Q</div>
            <div value="W">W</div>
            <div value="E">E</div>
            <div value="R">R</div>
            <div value="T">T</div>
            <div value="Y">Y</div>
            <div value="U">U</div>
            <div value="I">I</div>
            <div value="O">O</div>
            <div value="P">P</div>
            <br/> <br/>
            <div value="A">A</div>
            <div value="S">S</div>
            <div value="D">D</div>
            <div value="F">F</div>
            <div value="G">G</div>
            <div value="H">H</div>
            <div value="J">J</div>
            <div value="K">K</div>
            <div value="L">L</div>
            <div value="ENTER">Enter</div>
             <br/> <br/>
            <div value="Z">Z</div>
            <div value="X">X</div>
            <div value="C">C</div>
            <div value="V">V</div>
            <div value="B">B</div>
            <div value="N">N</div>
            <div value="M">M</div>
             <br/> <br/>
            <div value="UP">↑</div>
            <div value="RIGHT">→</div>
            <div value="DOWN">↓</div>
            <div value="LEFT">←</div>
        </span>
    </div>
    <br/><br/>
    <h1>执行流程：</h1>
    <br/>
    <div id="valueList">
        <div class="valueList_item">
            <div>我是值</div>
            <span>- ></span>
        </div>
        <div class="valueList_item">
            <div>我是值</div>
            <span>- ></span>
        </div>
        <div class="valueList_item">
            <div>我是值</div>
            <span>- ></span>
        </div>
    </div>
</div>
</body>
<script>
    //初始化
    layui.use('element', function () {
        var element = layui.element;
        var form = layui.form;
        form.render();
        element.init();

    });

    $(".keyboard div").on("click",function () {
        var value=$(this).attr("value");
        var text=$(this).text();

        //请求服务器
        $.ajax({
            url: "/saveAndExecuteEvent",
            type: "POST",
            async: true,
            data: {
                event: value
            },
            success: function (data) {
              if (data.data==null){
                  layer.msg(data.meta);
              }else{
                  layer.msg("执行完毕 >>"+ text);
              }
            },
            error: function (e) {
                console.log(e)
            }
        });


        var result = getJointElement('<div class="valueList_item">',
            ' <div>',
            text,
            "</div>",
            "<span>- ></span>",
            "</div>");
        $("#valueList").append(result);
    });
</script>
</html>